<template>
  <div class="radioComponent" v-if="item">
    <div class="title">{{ item.title }}</div>
    <div class="right">
      <el-radio-group v-model="value" @change="radioGroupChange">
        <el-radio :label="opt.id" v-for="opt in item.options" :key="opt.id">{{
          opt.name
        }}</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "radioComponent",
  data() {
    return {
      value: 0,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  created() {},
  props: ["item", "rightIndex", "catalogIndex", "ocIndex", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 500);
  },
  methods: {
    init() {
      if (this.item) {
        this.value = null;
        this.$nextTick(() => {
          let oItem = JSON.parse(JSON.stringify(this.item));
          this.value = oItem.value;
        });
      }
    },
    radioGroupChange() {
      // //console.log(radioGroupChange(), this.item.ename, this.value);
      if (this.needUpdate) {
        let needUpdateMainChild = true; 

        if (this.item && this.item.ename && this.item.ename === "pageCover") {
          needUpdateMainChild = false;
        }
        let row = new Object();
        row.value = this.value;
        row.ename = this.item.ename;
        row.rightIndex = this.rightIndex;
        row.catalogIndex = this.catalogIndex;
        row.ocIndex = this.ocIndex;
        row.needUpdateMainChild = needUpdateMainChild;
        row.needUpdateMain = false;

        // if (row && row.ename && row.ename === "numberOfLinesId") {
        //   let io = this.item.options;
        //   let cur = io.filter((i) => i.id == this.value);
        //   row.value = this.value + "__" + cur[0].value;
        //   Bus.$emit("buttonListRadioUpdate", cur[0].value);
        // }
        // //console.log(row);
        this.$emit("updateParent", JSON.stringify(row));
      }
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.radioComponent {
  display: flex;
  align-items: center;
  .title {
    width: 100px;
    min-height: 32px;
    font-size: 12px;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    padding-right: 10px;
  }
  .right {
    display: flex;
    align-items: center;
    flex: 1;
    width: calc(100% - 100px);
  }
}
</style>